<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>参赛者详情</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="libs/l7/light7.min.css">
    <link rel="stylesheet" href="Content/common.css">
    <link rel="stylesheet" href="Content/enroll.css">
</head>

<body>
    <!-- 你的html代码 -->
    <div class="page" style="background:white;" id="app">
        <nav class="bar bar-tab">
            <a class="tab-item active" href="#">
                <span class="icon">
                    <img src="Images/home_active.png"/>
                </span>
                <span class="tab-label">首页</span>
            </a>
            <a class="tab-item external" href="enroll.html">
                <span class="icon">
                    <img src="Images/enroll.png"/>
                </span>
                <span class="tab-label">我要报名</span>
            </a>
            <a class="tab-item external" href="rankList.html">
                <span class="icon">
                    <img src="Images/rank.png"/>
                </span>
                <span class="tab-label">排行榜</span>
            </a>
            <a class="tab-item external" href="rule.html">
                <span class="icon">
                    <img src="Images/rule.png"/>
                </span>
                <span class="tab-label">活动规则</span>
            </a>
        </nav>
        <div class="content">
            <!-- 这里是页面内容区 -->
            <!--banner-->
            <div class="er-banner">
                <img src="IMages/banner.jpg" alt="" />
            </div>
            <!--searchBar-->
            <div class="er-search">
                <input class="er-searchBar" type="text" placeholder="请输入参赛者姓名或编号">
                <div class="er-searchBtn">
                    搜索
                </div>
            </div>
            <div class="er-bolang"></div>
            <!--main边框-->
            <div class="er-main">
                <div class="erM-title">
                    赵丽颖<span>编号:1995</span>
                </div>
                <div class="erM-tip">
                    <!-- 如果没有报名 隐藏此处 -->
                    <a>编辑资料</a>
                </div>
                <div class="user-num-box">
                    <div class="detail-user-card" style="margin-right:.75rem;">
                        <p class="num"><span>702</span>赞</p>
                        <p class="card-title">当前赞数</p>
                    </div>
                    <div class="detail-user-card" style="margin-left:.75rem;">
                        <p class="num">第<span>12</span>名</p>
                        <p class="card-title">当前排名</p>
                    </div>
                </div>
                <!-- 参赛宣言 -->
                <div class="detail-slogan">
                    <div class="slogan-title">参赛宣言:</div>
                    <div class="slogan-content">我家有宠初长成!</div>
                </div>
                <!-- 参赛图片 -->
                <div class="detail-imgs">
                    <!-- 测试用图 -->
                    <img src="testimg/1.jpeg" />
                    <img src="testimg/2.jpeg" />
                    <img src="testimg/3.jpeg" />
                </div>
                <div class="erM-btn">
                    <div class="erM-submit">
                        为TA点赞
                    </div>
                    <div class="erM-seeMore">
                        我要报名
                    </div>
                </div>

                <div class="erM-card erM-line"></div>
                <div class="erM-card erM-icon">
                    <!-- <img src="Images/PetIn_logo.png" class="logo" /> -->
                    <a href="">关注点击：PetIn 宠爱有家</a >
                    <img src="Images/petin_qrcode.png" class="qrcode" />
                </div>
                <div class="erM-tip2">
                    <span></span>
                    <p>长按或扫描，了解更多活动</p>
                    <span></span>
                </div>
            </div>
            <!--  <div class="er-sucDiv">
                <div class="er-suc">
                    <img src="Images/close.png" class="closeThis" />
                    <img src="Images/success.png" alt="" />
                    <p>报名成功</p>
                    <p>恭喜您报名成功啦！</p>
                </div>
            </div> -->

        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script type='text/javascript' src='libs/l7/light7.min.js' charset='utf-8'></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {

            },
            methods: {

            }
        });
    </script>
</body>

</html>